<template>
	<view class="flex-col page">
		<view class="flex-col section_1">
			<view class="flex-col section_2">
				<view class="justify-between section_3">
					<text class="text_1">{{detail.card_name | substring(12) }}</text>
					<view class="flex-col items-center text-wrapper">
						<text>{{ detail.card_price }}元</text>
					</view>
				</view>
				<view class="center-group flex-col view">
					<text>适用门店：{{ detail.storesString | substring(16) }}</text>
					<text class="text_4">适用教室：适用教室数量{{detail.roomsCount}}间</text>
				</view>
				<view class="center-group justify-between view_1">
					<view class="flex-col group_1">
						<text class="text_7">累计时长：{{detail.card_total_hour}}小时 （ {{ (detail.card_price / detail.card_total_hour).toFixed(2) }} 元每小时 ）</text>
						<text class="text_7">卡有效期：{{detail.card_service_term_day}}天</text>
					</view>
					<image src="@/static/assets/16502914363372354647.png" class="image_1" />
				</view>
			</view>
		</view>
		<view class="flex-col section_4">
			<view class="flex-col">
				<view class="flex-row group_4">
					<view class="section_5"></view>
					<text class="text_8">卡劵详情</text>
				</view>
				<view class="flex-col group_5">
					<view class="flex-row">
						<text class="text_9">销售价格：</text>
						<text class="text_10">{{detail.card_price}}元</text>
					</view>
					<view class="flex-row group_7">
						<text class="text_11">有效期：</text>
						<text class="text_12">{{detail.card_service_term_day}}天</text>
					</view>
					<view class="flex-row group_8">
						<text class="text_13">适用门店：</text>
						<text class="text_14">{{ strSub(detail.storesString, 18) }}</text>
					</view>
					<view class="flex-row group_9">
						<text class="text_15">适用教室：</text>
						<text class="text_16">适用教室数量{{detail.roomsCount}}间</text>
					</view>
					<view class="flex-row group_10">
						<text class="text_17">累计时长：</text>
						<text class="text_18">{{detail.card_total_hour}}小时</text>
					</view>
					<view class="flex-row group_11">
						<text class="text_19">平均价格：</text>
						<text class="text_20">{{(detail.card_price / detail.card_total_hour).toFixed(2)}}元每小时</text>
					</view>
				</view>
				<view class="divider"></view>
				<view class="richhtml">
					<u-parse :html="detail.card_note"></u-parse>		
				</view>
			</view>

			<view class="flex-col text-wrapper_1">
				<view class="payBtn"><button class="button" hover-class="hoverClass" @click="buycard">支付 {{detail.card_price}}元</button></view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			detail: {}
		};
	},
	onLoad(options) {
		let id = options.id
		this.$u.api.getCardInfo({id: id})
			.then((res) => {
				if (1 == res.code) {
					this.detail = res.data
				}
			})
	},
	methods: {
		buycard () {
			uni.showModal({
				title: '提示',
				content: `你确认要购买: ${this.detail.card_name} 卡吗？`,
				success: (res) => {
					if (res.confirm) {
						this.$u.api.createTransaction({
							type: 3, //购买卡券
							item_key: this.detail.id,
						}).then(res => {
							let data = res.data
							if (0 == res.code) {
								this.$u.toast(res.msg)
								return 
							}
							return new Promise((resolve, reject) => {
								uni.requestPayment({
									provider: 'wxpay',
									timeStamp: data.timeStamp,
									nonceStr: data.nonceStr,
									package: data.package,
									signType: data.signType,
									paySign: data.paySign,
									success: function(res) {
										resolve(res)
									},
									fail: function(err) {
										reject(err);
									}
								});
							})
						}).then(res => {
							console.log(res);
							if (res.code = 1) {
								this.$u.toast('你的卡券购买成功')
								setTimeout(() => {
									this.$u.route({
										url: '/pages/myCenter/myVoucher',
									})
								}, 1500)
							} else {
								this.$u.toast(res.msg)
							}
						}, err => {
							this.$u.toast('购买失败，请联系管理员')
						})
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
	}
};
</script>

<style scoped lang="scss">
.page {
	.richhtml {
		margin-top: 32rpx;
		color: #000000;
		font-size: $base-font-size-14;
		font-weight: $base-font-weight-300;
		line-height: 40rpx;
		text-align: left;
	}
	background-color: rgb(243, 243, 243);
	width: 100%;
	overflow-y: auto;
	height: 100%;

	.group {
		padding: 16rpx 24rpx;
		color: rgb(51, 51, 51);
		font-size: 28rpx;
		font-weight: 600;
		line-height: 40rpx;
		white-space: nowrap;
		.text {
			margin: 6rpx 0;
		}
		.image {
			border-radius: 26rpx;
			width: 156rpx;
			height: 52rpx;
		}
	}
	.section_1 {
		padding: 20rpx 0;
		background-color: #ffffff;
		.section_2 {
			margin: 0 24rpx;
			padding-bottom: 20rpx;
			background-image: linear-gradient(
				90deg,
				rgb(248, 218, 229) 0%,
				rgb(248, 218, 229) 1.65%,
				rgb(248, 193, 201) 64.33%,
				rgb(253, 204, 212) 97.82%,
				rgb(253, 204, 212) 100%
			);
			border-radius: 8rpx;
			border: solid 20rpx rgb(216, 88, 134);
			.section_3 {
				padding: 12rpx 22rpx 12rpx 24rpx;
				background-color: rgb(72, 12, 33);
				.text_1 {
					margin: 8rpx 0;
					color: rgb(255, 255, 255);
					font-size: 28rpx;
					font-weight: 600;
					line-height: 40rpx;
					white-space: nowrap;
				}
				.text-wrapper {
					padding: 4rpx 24rpx 2rpx;
					color: rgb(255, 255, 255);
					font-size: 36rpx;
					font-weight: 600;
					line-height: 50rpx;
					white-space: nowrap;
					background-color: rgb(216, 88, 134);
					border-radius: 28rpx;
					min-width: 150rpx;
					height: 56rpx;
				}
			}
			.center-group {
				color: rgb(51, 51, 51);
				font-size: 28rpx;
				font-weight: 200;
				line-height: 40rpx;
				white-space: nowrap;
				padding: 0 20rpx;
				.text_4 {
					margin-top: 12rpx;
				}
				.group_1 {
					margin-top: 10rpx;
					.text_7 {
						margin-top: 12rpx;
					}
					.text_6 {
						margin-left: 56rpx;
					}
				}
				.image_1 {
					margin-right: 48rpx;
					margin-bottom: 6rpx;
					border-radius: 50%;
					width: 96rpx;
					height: 96rpx;
				}
			}
			.view {
				margin-right: -40rpx;
				margin-top: 20rpx;
			}
			.view_1 {
				margin-right: -40rpx;
			}
		}
	}
	.section_4 {
		margin-top: 16rpx;
		padding: 20rpx 22rpx 600rpx 24rpx;
		background-color: #ffffff;
		width: 100%;
		.text-wrapper_1 {
			margin-top: 200rpx;
			width: 100%;
			.payBtn {
				width: 100%;
				position: fixed;
				bottom: 20px;
				left: 0;
			}
			.button {
				margin: 0 24rpx;
				height: 80rpx;
				line-height: 80rpx;
				background-color: rgb(216, 88, 134);
				color: rgb(255, 255, 255);
				font-size: 28rpx;
				border-radius: 8rpx;
				border: 0;
			}
			.hoverClass {
				background-color: #bb2058;
				color: #ffffff;
				border: none;
			}
		}
		.group_4 {
			color: rgb(51, 51, 51);
			font-size: 28rpx;
			font-weight: 600;
			line-height: 40rpx;
			white-space: nowrap;
			.section_5 {
				margin: 6rpx 0;
				background-color: rgb(216, 88, 134);
				width: 8rpx;
				height: 28rpx;
			}
			.text_8 {
				margin-left: 12rpx;
			}
		}
		.group_5 {
			margin-top: 32rpx;
			.group_7 {
				margin-top: 12rpx;
				padding: 0 28rpx;
				.text_11 {
					color: rgb(51, 51, 51);
					font-size: 28rpx;
					font-weight: 200;
					line-height: 40rpx;
					white-space: nowrap;
				}
				.text_12 {
					margin-left: 6rpx;
					color: rgb(51, 51, 51);
					font-size: 28rpx;
					font-weight: 600;
					line-height: 40rpx;
					white-space: nowrap;
				}
			}
			.group_8 {
				margin-top: 12rpx;
				.text_13 {
					color: rgb(51, 51, 51);
					font-size: 28rpx;
					font-weight: 200;
					line-height: 40rpx;
					white-space: nowrap;
				}
				.text_14 {
					margin-left: 6rpx;
					color: rgb(51, 51, 51);
					font-size: 28rpx;
					font-weight: 600;
					line-height: 40rpx;
					white-space: nowrap;
				}
			}
			.group_9 {
				margin-top: 10rpx;
				.text_15 {
					color: rgb(51, 51, 51);
					font-size: 28rpx;
					font-weight: 200;
					line-height: 40rpx;
					white-space: nowrap;
				}
				.text_16 {
					margin-left: 6rpx;
					color: rgb(51, 51, 51);
					font-size: 28rpx;
					font-weight: 600;
					line-height: 40rpx;
					white-space: nowrap;
				}
			}
			.group_10 {
				margin-top: 12rpx;
				// padding: 0 56rpx;
				.text_17 {
					color: rgb(51, 51, 51);
					font-size: 28rpx;
					font-weight: 200;
					line-height: 40rpx;
					white-space: nowrap;
				}
				.text_18 {
					margin-left: 6rpx;
					margin-top: 4rpx;
					color: rgb(51, 51, 51);
					font-size: 28rpx;
					font-weight: 600;
					line-height: 40rpx;
					white-space: nowrap;
				}
			}
			.group_11 {
				margin-top: 8rpx;
				.text_19 {
					color: rgb(51, 51, 51);
					font-size: 28rpx;
					font-weight: 200;
					line-height: 40rpx;
					white-space: nowrap;
				}
				.text_20 {
					margin-left: 6rpx;
					color: rgb(51, 51, 51);
					font-size: 28rpx;
					font-weight: 600;
					line-height: 40rpx;
					white-space: nowrap;
				}
			}
			.text_9 {
				color: rgb(51, 51, 51);
				font-size: 28rpx;
				font-weight: 200;
				line-height: 40rpx;
				white-space: nowrap;
			}
			.text_10 {
				margin-left: 6rpx;
				color: rgb(51, 51, 51);
				font-size: 28rpx;
				font-weight: 600;
				line-height: 40rpx;
				white-space: nowrap;
			}
		}
		.divider {
			margin-top: 29rpx;
			background-color: rgb(237, 237, 237);
			height: 2rpx;
		}
		.text_21 {
			margin-right: 4rpx;
			margin-top: 31rpx;
			color: rgb(51, 51, 51);
			font-size: 28rpx;
			font-weight: 200;
			line-height: 40rpx;
			text-align: left;
			text-indent: 65rpx;
		}
	}
}

</style>
